layui.use(['flow','dropdown'], function() {
    let flow = layui.flow;


    //通用的面板生成器
    function panel_generater(space_id,space_name,space_url,space_img_url){
        let htmlString = "<div class=\"layui-col-md3\">\n" +
            "                        <div class=\"layui-panel layui-anim-up\" style=\"width: 280px;height: 150px \">\n" +
            "                            <div class=\"layui-row \">\n" +
            "                                <div class=\"layui-col-md4\">\n" +
            "                                    <div class=\"layui-inline\">\n" +
            "                                        <img src=\""+space_img_url+"\" class=\"layui-circle\" style=\"height: 80px;width: 80px;margin-top: 30px;margin-left: 30px\">\n" +
            "                                    </div>\n" +
            "                                </div>\n" +
            "\n" +
            "                                <div class=\"layui-col-md4\" style=\"margin-top: 60px;margin-left: 25px\">\n" +
            "                                    <a href=\""+space_url+"\">"+space_name+"</a>\n" +
            "                                </div>\n" +
            "\n" +
            "                                <div class=\"layui-col-md4\" style=\"margin-bottom: 10px;margin-left: 75%\">\n" +
            "\n" +
            "                                    <button type=\"button \" class=\"layui-btn layui-btn-xs\" id=\""+space_id+"\">\n" +
            "                                        <i class=\"layui-icon layui-icon-down layui-font-12\"></i> 操作\n" +
            "                                    </button>\n" +
            "                                </div>\n" +
            "\n" +
            "                            </div>\n" +
            "\n" +
            "                        </div>\n" +
            "                    </div>"
        return htmlString
    }


    //加载已管理空间的操作菜单
    function dropdown_auto_rander_managed(id){
        let dropdown = layui.dropdown;
        dropdown.render({
            elem: '#u'+id
            ,data: [{
                title: '退出空间'
                ,id: 1
            },{
                title: '转让管理'
                ,id: 2
            }]
            ,click: function(obj){
                let strAll = this.elem.selector
                let str = strAll.split("#u")//分离出空间的id号
                alert(str[1])//获取到空间id号
                layer.tips('点击了：'+ obj.title+"<br>空间id为:"+str[1], this.elem, {tips: [1, '#5FB878']})
            }
        });

    }

    //加载已管理空间
    flow.load({
        elem: '#managed_space' //流加载容器
        ,end: ' '
        , done: function (page, next) { //执行下一页的回调

            //模拟数据插入
            setTimeout(function () {
                let lis = [];
                for (let i = 0; i < 4; i++) {
                    lis.push(panel_generater("u"+i,i,"","/static/img/test/IMG_1008.jpg"))

                }
                next(lis.join(''), page < 1); //假设总页数为 1
                for (let i = 0; i < 4; i++) {
                    dropdown_auto_rander_managed(i)

                }


            }, 500);
        }
    });

    //加载已加入空间的操作菜单
    function dropdown_auto_rander_particapated(id){
        let dropdown = layui.dropdown;
        dropdown.render({
            elem: '#m'+id
            ,data: [{
                title: '退出空间'
                ,id: 1
            }]
            ,click: function(obj){
                let strAll = this.elem.selector
                let str = strAll.split("#m")//分离出空间的id号
                alert(str[1])//获取到空间id号
                layer.tips('点击了：'+ obj.title+'<br>空间id为:'+str[1], this.elem, {tips: [1, '#5FB878']})
            }
        });

    }


    //加载已管理空间
    flow.load({
        elem: '#participated_space' //流加载容器
        ,end: ' '
        , done: function (page, next) { //执行下一页的回调

            //模拟数据插入
            setTimeout(function () {
                let lis = [];
                for (let i = 0; i < 4; i++) {
                    lis.push(panel_generater("m"+i,i,"","/static/img/test/IMG_1008.jpg"))

                }
                next(lis.join(''), page < 1); //假设总页数为 1
                for (let i = 0; i < 4; i++) {
                    dropdown_auto_rander_particapated(i)

                }


            }, 500);
        }
    });




})